<!--
 * @Description: 
 * @Author: 客
 * @Date: 2024-11-14 09:04:06
 * @LastEditors: 客
 * @LastEditTime: 2024-11-14 09:48:34
 * 这课真牢啊
-->
<!-- 登录 -->
<template>
    <div class="main">
    <div  style="font-size: 30px;">登录</div>
      <!-- 表单元素 -->
      <form>
          <table>
            <tr>
              <td class="tdLeft">
                <label for="username">
                  用户名
                </label>
              </td>
              <td class="tdRight">
                <input v-model="newUsername" type="text" name="username" id="username" placeholder="请输入用户名">
              </td>
            </tr>
            <tr>
              <td class="tdLeft">
                <label for="password">
                  密码
                </label>
              </td>
              <td class="tdRight">
                <input v-model="newPassword" type="password" name="password" id="password" placeholder="请输入密码">
              </td>
            </tr>
            <tr>
              <td id="tdSubmit" colspan="2">
                <input id="btnSubmit" type="submit" value="登录" @click="handleLogin">
              </td>
            </tr>
          </table>
        </form>
    </div> 
    </template>    
     <script setup>
       import { ref } from 'vue'
  
    const username = ref('')
    const password = ref('')
    
    function handleLogin(){
        if (username.value === 'zsx' && password.value === 'die') {
        alert('登录成功')
        } else {
        alert('登录失败')
        }
  }
     </script>
     <style scoped>
      .main{
       width: 200px;
       height: 200px;
       background-color: pink;
       border: 1px solid #000;
       margin: 100px auto;
       text-align: center;
      }
     </style>